import React, {useEffect} from 'react';
import {Alert, App, Button, Card, Descriptions, Flex, Table} from "antd";
import {Link, useLocation, useNavigate} from "react-router-dom";
import {SecurityMenu} from "type/SecurityMenu";
import LogFactory from "log/LogFactory";
import {AlertProps, Divider} from "antd/lib";
import {ColumnsType} from "antd/es/table";
import {SecurityUserType} from "type/SecurityUser";
import {requestDelete, requestGet} from "util/request";
import {fetchDeleteData} from "../../../redux/reducer/menuReducer";
import {useAppDispatch} from "../../../redux/hook";

const log = LogFactory.getLog("MenuDeleteComponent") ;

const userColumns: ColumnsType<SecurityUserType> = [
    {
        dataIndex: 'index',
        title: '序号' ,
        width: 60,
        align: "center" ,
        key: 'index',
        render: (value, record, index) => {
            return <strong> {index + 1} </strong> ;
        }
    },
    {
        key: 'id',
        dataIndex: 'id',
        title: '用户编号',
    },
    {
        key: 'username',
        dataIndex: 'username',
        title: '用户名',
    },
    {
        key: 'identity',
        dataIndex: 'identity',
        title: '用户身份',
    },
    ] ;

const MenuDeleteComponent = () => {

    const menu: SecurityMenu = useLocation().state ;


    const {message} = App.useApp() ;
    const dispatch = useAppDispatch() ;
    const navigate = useNavigate();
    const [data,setData] = React.useState<SecurityUserType[]>([]) ;
    const [loading,setLoading] = React.useState<boolean>(false) ;
    const [alterData, setAlterData] = React.useState<AlertProps>({
        message: "菜单没有与用户绑定关系 !",
        type: "success",
        showIcon: true,
    }) ;

    useEffect(() => {
        setLoading(true) ;
        requestGet<SecurityUserType[]>("/manager/security-user-menu/list/user/" + menu.id).then(res => {
            setData(res.data) ;
           if(res.data.length !== 0){
               setAlterData({
                   message: "菜单与以下 " + res.data.length + " 个用户存在绑定关系 !",
                   type: "error",
                   showIcon: true,
               }) ;
           }
            setLoading(false) ;
        });
    }, []);

    const unbind = async () => {
        setLoading(true) ;
        let res = await requestDelete<number>("/manager/security-user-menu/unbind/" + menu.id).then(res => res) ;
        log.debug("解除绑定结果" , res) ;
        if (res.data > 0){
            message.success("解除绑定成功") ;
            setAlterData({
                message: "解除菜单与用户绑定成功 !",
                type: "success",
                showIcon: true,
            }) ;
            setData([]) ;
        }else {
            message.error("解除绑定失败") ;
        }
        setLoading(false) ;
    };

    const deleteData = async () => {
        setLoading(true) ;
        let res = await dispatch(fetchDeleteData(menu.id)).unwrap().then(res=>res) ;
        setLoading(false) ;
        if (res > 0){
            message.success("删除菜单成功") ;
            navigate("",{replace: true}) ;
        }else {
            message.info("删除菜单失败") ;
        }
    };

    return (
        <Card
            title={"删除菜单"}
            extra={ <Link to={""}>菜单列表</Link> }
        >
            <Descriptions
                bordered={true} column={2} size={"small"}>
                <Descriptions.Item label="路径编号">{menu.id}</Descriptions.Item>
                <Descriptions.Item label="路径KEY">{menu.key}</Descriptions.Item>
                <Descriptions.Item label="路径模式">{menu.path}</Descriptions.Item>
                <Descriptions.Item label="路径描述">{menu.label}</Descriptions.Item>
            </Descriptions>
            <Divider/>

            <Flex justify={"space-evenly"}>
                        <Button loading={loading} type={"primary"} disabled={data.length === 0 } onClick={unbind} >解除绑定</Button>
                        <Button loading={loading} type={"primary"} danger disabled={data.length !== 0} onClick={deleteData}>删除菜单</Button>
            </Flex>
            <Table<SecurityUserType>
                loading={loading}
                title={() => <Alert {...alterData} />}
                dataSource={data}
                columns={userColumns}
            />

        </Card>
    );
};

export default MenuDeleteComponent;